<template>
    <div class="edu-page-warp">
        <div class="edu-page-title" v-if="queryCondition">筛选条件</div>
        <el-card
            shadow="never"
            body-style="padding: 24px; padding-bottom: 6px;"
            v-if="queryCondition"
        >
            <el-form ref="queryForm" :model="query" label-position="left" label-width="110px">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item :label="$t('minor.major.college') + ':'" prop="departmentId" class="no-bottom">
                            <el-select
                                v-model="query.departmentId"
                                :disabled="!canSelectFaculty"
                                placeholder="请选择"
                                clearable
                                filterable
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in options.faculty"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="审批状态:" prop="result" class="no-bottom">
                            <el-select
                                v-model="query.result"
                                clearable
                                placeholder="选择审批状态"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in options.result"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="起始时间:" prop="startTime" class="no-bottom">
                            <el-date-picker
                                v-model="query.startTime"
                                clearable
                                :picker-options="pickerOptions"
                                type="datetime"
                                placeholder="选择开始时间"
                                format="yyyy/MM/dd HH:mm"
                                value-format="timestamp"
                                align="right"
                                style="width: 100%"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="终止时间:" prop="endTime" class="no-bottom">
                            <el-date-picker
                                v-model="query.endTime"
                                clearable
                                :picker-options="pickerOptions"
                                type="datetime"
                                placeholder="选择开始时间"
                                format="yyyy/MM/dd HH:mm"
                                value-format="timestamp"
                                align="right"
                                style="width: 100%"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="8">
                        <el-form-item class="float-right no-bottom no-right">
                            <el-button @click="resetForm('queryForm')">重置</el-button>
                            <el-button type="primary" @click="filterTaskSubmit">筛选</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <div class="edu-page-title mg-top">审批列表</div>
        <el-card shadow="never" body-style="padding: 24px;">
            <el-input
                v-model="query.condition"
                v-if="!queryCondition"
                placeholder="申请人"
                style="width:240px"
                @keyup.enter.native="searchApprove"
            >
                <i
                    class="el-icon-search"
                    slot="suffix"
                    style="margin-top:10px;cursor:pointer"
                    @click="searchApprove"
                ></i>
            </el-input>
            <el-table
                stripe
                :data="data"
                size="mini"
                style="margin-top:10px"
                tooltip-effect="light"
            >
                <el-table-column prop="no" label="申请编号" show-overflow-tooltip></el-table-column>
                <el-table-column prop="applicantName" label="申请人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="applicantId" label="申请人编号" show-overflow-tooltip></el-table-column>
                <el-table-column label="申请时间" show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.time | formatDate }}</template>
                </el-table-column>
                <el-table-column label="审批状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.result == 'Process'" type="success">进行中</el-tag>
                        <el-tag v-if="scope.row.result == 'End'" type="info">已结束</el-tag>
                        <el-tag v-if="scope.row.result == 'Reject'" type="warning">已驳回</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="approvorName" label="下一级审批人" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="90">
                    <template slot-scope="scope">
                        <el-button
                            v-if="scope.row.result != 'Process'"
                            type="text"
                            size="mini"
                            @click="showRollDetail(scope.row.no)"
                        >查看明细</el-button>
                        <el-button
                            v-if="scope.row.result == 'Process' && !queryCondition"
                            type="text"
                            size="mini"
                            @click="showRollDetail(scope.row.no)"
                        >查看明细</el-button>
                        <el-button
                            v-if="scope.row.result == 'Process' && queryCondition"
                            type="text"
                            size="mini"
                            @click="showRollDetail(scope.row.no)"
                        >审核</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="edu-pagination">
                <div class="float-right">
                    <el-pagination
                        :current-page="query.pageNum_"
                        :page-sizes="[20,50,100,500,1000]"
                        :page-size="query.pageSize_"
                        :total="query.total_"
                        layout="total, sizes, prev, pager, next, jumper"
                        style="float: right;margin:10px 60px 0 0;"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        @keyup.enter.native.stop="e=>{handleCurrentChange(e.target.value)}"
                    />
                </div>
            </div>
        </el-card>
    </div>
</template>
<script>
import { selectTaskList, selectTaskListPage } from "common/src/api/approval";
import { getSessionUser } from "common/src/api/session";
import UTILS from "common/src/utils/utils";
import { queryDic } from "common/src/api/dictionary";
import filters from "common/src/filters";
import { queryMajorSupList } from "common/src/api/minor/minorMajorManager";
export default {
    name: "minorCulturePlanApproveList",
    filters: {
        formatDate(date) {
            return filters.formatDate(date, "yyyy/MM/dd hh:mm:ss");
        }
    },
    mounted() {
        if (!this.$checkMinor()) return;
        //this.getApproveList();
        //获取当前角色
        //this.getType();
        //初始化学院
        this.initOptions();
    },
    data() {
        return {
            queryCondition: true,
            canSelectFaculty: true,
            query: {
                condition: "",
                wfType: 62,
                pageNum_: 1,
                pageSize_: 20,
                total_: 0,
                departmentId: "",
                result: "",
                startTime: "",
                endTime: ""
            },
            searchWord: "",
            data: [],
            options: {
                result: [
                    {
                        value: "",
                        label: "全部"
                    },
                    {
                        value: "Process",
                        label: "进行中"
                    },
                    {
                        value: "End",
                        label: "已结束"
                    },
                    {
                        value: "Reject",
                        label: "已驳回"
                    }
                ],
                faculty: []
            }
        };
    },
    methods: {
        resetForm() {
            if( this.canSelectFaculty){
                this.query.departmentId = "";
            }
            this.query.result = "";
            this.query.startTime = "";
            this.query.endTime = "";
            this.getApproveList();
        },
        filterTaskSubmit() {
            this.getApproveList();
        },
        //获取当前登录角色权限信息
        getType() {
            getSessionUser().then(res => {
                if ((res.code = 200)) {
                    if (!res.data.mockUser) {
                        if (res.data.user.type == 2) {
                            this.queryCondition = false;
                            this.getApproveList();
                        } else if (
                            res.data.user.innerRoles.join(",").indexOf("1") >=
                                0 &&
                            res.data.user.currentRole == "1"
                        ) {
                            //校管理员登录
                            //显示查询条件
                            this.queryCondition = true;
                            this.canSelectFaculty = true;
                            this.query.departmentId = "";
                            this.getApproveList();
                        }
                        if (
                            res.data.user.innerRoles.join(",").indexOf("2") >=
                                0 &&
                            res.data.user.innerRoles.join(",").indexOf("1") ==
                                -1 &&
                            res.data.user.currentRole == "1"
                        ) {
                            //学院教务登录
                            //显示查询条件
                            this.queryCondition = true;
                            this.canSelectFaculty = false;
                            this.query.departmentId = this.options.faculty[0].value;
                            this.getApproveList();
                        }
                    } else {
                        if (
                            !!res.data.mockUser &&
                            res.data.mockUser.type == 2
                        ) {
                            //学生
                            this.queryCondition = false;
                            this.getApproveList();
                        } else if (
                            !!res.data.mockUser &&
                            res.data.mockUser.innerRoles
                                .join(",")
                                .indexOf("1") >= 0 &&
                            res.data.mockUser.currentRole == "1"
                        ) {
                            //校管理员登录
                            //显示查询条件
                            this.queryCondition = true;
                            this.canSelectFaculty = true;
                            this.query.departmentId = "";
                            this.getApproveList();
                        }
                        if (
                            !!res.data.mockUser &&
                            res.data.mockUser.innerRoles
                                .join(",")
                                .indexOf("2") >= 0 &&
                            res.data.mockUser.innerRoles
                                .join(",")
                                .indexOf("1") == -1 &&
                            res.data.mockUser.currentRole == "1"
                        ) {
                            //学院教务登录
                            //显示查询条件
                            this.queryCondition = true;
                            this.canSelectFaculty = false;
                            this.query.departmentId = this.options.faculty[0].value;
                            this.getApproveList();
                        }
                    }
                }
            });
        },
        initOptions() {
            let data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_YX"]
            };
            queryDic(data).then(res => {
                this.options.faculty = [];
                UTILS.fillSelect(
                    {
                        faculty: "X_YX"
                    },
                    res.data,
                    this.options
                );
                this.getType();
            });
        },
        _fill(type, data) {
            for (const key in data) {
                this.options[type].push({
                    value: key,
                    label: data[key]
                });
            }
        },
        getApproveList(isFirstPage = true) {
            if (!this.$checkMinor()) return;
            if (isFirstPage) {
                this.query.pageNum_ = 1;
            }
            let sessionData = JSON.parse(localStorage.getItem("sessiondata"));
            if (!!sessionData.mockUser) {
                if (sessionData.mockUser.type == 2) {
                    this.query.applicantId = sessionData.mockUser.uid;
                }
            } else {
                if (sessionData.type == 2) {
                    this.query.applicantId = sessionData.uid;
                }
            }
            selectTaskListPage(this.query).then(res => {
                if (res.code == 200) {
                    this.query.total_ = res.data.total_;
                    this.data = res.data.list;
                }
            });
        },
        searchApprove() {
            this.getApproveList(true);
        },
        handleSizeChange(val) {
            this.query.pageSize_ = val;
            this.getApproveList();
        },
        handleCurrentChange(val) {
            this.query.pageNum_ = val;
            this.getApproveList(false);
        },
        showRollDetail(id) {
            if (!this.$checkMinor()) return;
            this.$router.push("/minorApproveDetail?id=" + id);
        }
    }
};
</script>

